<template>
  <div class="look_detail">
    <head-top head-title="明细详情" go-back="true" hidden='true'></head-top>
    <!--详情列表-->
    <div class="detail_box" v-for="(list,index) in detailList">
      <div class="detail_title">
        <h3>{{list.month}}月 明细详情</h3>
        <h4>单位：元</h4>
      </div>
      <div class="form_box">
        <div class="thead_title">
          <span>共用部位、共用设施设备经营支出、收入、汇总</span>
        </div>
        <table class="table">
          <thead>
          <tr>
            <th>时间</th>
            <th>项目</th>
            <th>收入/支出</th>
            <th>余额</th>
            <th>备注</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(li,index) in list.data">
            <td><span>{{li.create_time*1000 | dateFmt('YYYY-MM-DD')}}</span></td>
            <td><span>{{li.title}}</span></td>
            <td><span>{{li.log}}</span></td>
            <td><span>￥{{li.balance}}</span></td>
            <!--查看凭证根据img_id进行-->
            <td class="td_width" @click="$router.push('/home/ViewVoucher/'+li.id)"><span class="only_color">查看凭证</span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="form_box1">
        <table class="table">
          <tbody>
          <tr>
            <td><span>总收入</span></td>
            <td colspan="3" class="col_3"><span>￥{{list.income}}</span></td>
          </tr>
          <tr>
            <td><span>总支出</span></td>
            <td colspan="3" class="col_3"><span>￥{{list.expenditure}}</span></td>
          </tr>
          </tbody>
        </table>
      </div>
      <h5>附：其他应专款专用的经费收支情况</h5>
      <div class="line_div"></div>
    </div>
    <!--暂无数据-->
    <div class="default1" v-show="flag&&detailList.length===0">
      <p>抱歉！暂无数据</p>
    </div>
  </div>
</template>
<style lang="scss">
  .look_detail {
    width: 100%;
    padding-top: 40px;
    .detail_box {
      .detail_title {
        width: 100%;
        h3 {
          font-size: 15px;
          font-weight: normal;
          padding: 10px;
        }
        h4 {
          font-size: 15px;
          font-weight: normal;
          float: right;
          padding-right: 10px;
        }
      }
      .form_box {
        width: 98%;
        margin-left: 0.8%;
        margin-top: 30px;
        border: 1px solid #d7d7d7;
        .thead_title {
          width: 100%;
          text-align: center;
          line-height: 40px;
          border-bottom: 1px solid #d7d7d7;
          span {
            font-size: 14px;
          }
        }
        .table {
          width: 100%;
          line-height: 30px;
          text-align: center;
          table-layout: fixed;
          thead {
            tr {
              th {
                border-bottom: 1px solid #d7d7d7;
                font-size: 14px;
                font-weight: normal;
                border-right: 1px solid #d7d7d7;
                width: 20%;
              }
              th:last-child {
                border-right: none;
              }
            }
          }
          tbody {
            tr {
              border-bottom: 1px solid #d7d7d7;
              td {
                font-size: 12px;
                color: #393939;
                font-weight: normal;
                border-right: 1px solid #d7d7d7;
                /*没有固定高垂直居中*/
                vertical-align: middle;
                width: 20%;
                word-wrap: break-word;
                word-break: break-all;
                .only_color {
                  color: #0b7ad9;
                }
              }
              td:last-child {
                border-right: none;
              }
            }
            tr:last-child {
              border-bottom: none;
            }
          }
        }
      }
      /*有合并的表格样式*/
      .form_box1 {
        width: 98%;
        margin-left: 0.8%;
        border: 1px solid #d7d7d7;
        border-top: none;
        .table {
          width: 100%;
          line-height: 30px;
          text-align: center;
          table-layout: fixed;
          tbody {
            tr {
              border-bottom: 1px solid #d7d7d7;
              td {
                font-size: 12px;
                color: #393939;
                font-weight: normal;
                border-right: 1px solid #d7d7d7;
                vertical-align: middle;
                width: 40%;
                word-wrap: break-word;
                word-break: break-all;
              }
              .col_3 {
                width: 60%;
                text-align: left;
                padding-left: 20px;
              }
              td:last-child {
                border-right: none;
              }
            }
            tr:last-child {
              border-bottom: none;
            }
          }
        }
      }
      h5 {
        padding: 10px;
        font-size: 15px;
        font-weight: normal;
      }
      .line_div {
        width: 100%;
        height: 10px;
        background: #f2f2f2;
      }
    }
    .default1 {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 0px;
      justify-content: center;
      align-items: center;
      background: url("../../assets/default.png") no-repeat;
      background-size: 100px 100px;
      background-position: center;
      padding-bottom: 20px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 190px;
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import { getLookDetail } from '../../api/government'

  export default {
    name: 'LookDetail',
    data () {
      return {
        detailList: [],
        flag: false
      }
    },
    created () {
      this._getLookDetail()
    },
    methods: {
      _getLookDetail () {
        getLookDetail(this.$route.params.type).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.detailList = res.data
            this.flag = true
            // console.log(this.detailList)
          }
        })
      }
    },
    computed: {},
    components: {
      headTop
    }
  }
</script>
